import React from 'react'
import { Table, Space, Button, Popconfirm } from 'antd';

// 表格待渲染的数据源
// 班级、学号、姓名、测量方式、体温、所在地、是否外出、是否有不良症状、填报时间
// const data = [
//   {
//     id: 1,
//     clazz: '二年级一班',
//     stuNo: '20200001',
//     name: '张三',
//     type: 1, // 1. 额温  2. 耳温
//     temperature: 36.2,
//     address: '成都青羊区',
//     isOut: 0, // 0. 否 1. 是
//     symptom: '无',
//     createTime: '2021-01-09 10:25:37'
//   },
// ]

// 自定义表格组件：函数组件
export default function CustomTable(props) {
  // console.log(this) // undefined
  const {dataSource, total, pageSize, page, onChange, onUpdateClick, onDeleteClick} = props

  // 表格中的列的定义
  const columns = [
    {
      title: '序号', // 列标题
      dataIndex: 'id', // 数据项（对象）中的属性名
      key: 'id', // 标识，有 dataIndex 的不同设置，可省略
    },
    {
      title: '班级',
      dataIndex: 'clazz',
      responsive: ['xl', 'xxl']
    },
    {
      title: '学号',
      dataIndex: 'stuNo',
      responsive: ['xl', 'xxl']
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '测量方式',
      dataIndex: 'type',
      render: (text, record, index) => {
        // render 是需要渲染复杂内容时使用到的渲染函数
        // 参数：text 是渲染数据项中当前列的值
        // record 是当前渲染的数据项（对象）
        // index 是行索引（数据项的索引）
        return (
          <span>
            {text === 1 ? '额温' : '耳温'}
          </span>
        )
      }
    },
    {
      title: '体温',
      dataIndex: 'temperature'
    },
    {
      title: '所在地',
      dataIndex: 'address',
      responsive: ['xl', 'xxl']
    },
    {
      title: '是否外出',
      dataIndex: 'isOut',
      render: text => (
        <span>{text === 0 ? '否' : '是'}</span>
      )
    },
    {
      title: '症状',
      dataIndex: 'symptom',
    },
    {
      title: '记录时间',
      dataIndex: 'createTime',
      responsive: ['xl', 'xxl']
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => onUpdateClick(record)}>修改</Button>
          <Popconfirm
            title="是否删除当前项？"
            onConfirm={() => onDeleteClick(record.id)}
            okText="是"
            cancelText="否"
          >
            <Button type="danger">删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <Table
      bordered
      rowKey="id"
      columns={columns}
      dataSource={dataSource}
      pagination={{
        total,
        current: page,
        pageSize,
        pageSizeOptions: [5, 10, 20, 50, 100, 1000],
        showTotal: (total, range) => `总记录数：${total}，当前第${range[0]}-${range[1]}条`,
        onChange
      }}
    />
  )
}
